<template>
    <div>
        <header class="base-header">
            <i @tap="goback"></i>
            <div class="search-block">
                <input type="text" placeholder="关键字" v-model="keyword" @keyup.13="search">
                <i class="search-icon" @tap="search"></i>
            </div>
        </header>
        <article class="main mui-content mui-scroll-wrapper" id="refreshContainer" >
            <div class="mui-scroll">
                <div class="mui-table-view mui-table-view-chevron">
                    <div class="no-goods" v-if="data.myGoodsList.length===0" style="background:#efeef4;width:100%;height:340px;text-align:center;color:#bbb;">
                      <img src="../../public/images/nogoods.png" style="width:160px;" alt="">
                      <span style="font-size:14px;">没有找到你说的商品，换个关键词试试吧！</span>
                    </div>
                    <div class="item" v-for="item in data.myGoodsList" @tap="lookGoods(item.id)">
                        <div class="goods-line">
                            <div class="details">
                                <img :src="item.imageUrl" class="goods-line-img">
                                <div class="title settlement-title">
                                    <h3>{{item.name}}</h3>
                                    <div class="integral">
                                        {{item.point}}积分
                                    </div>
                                    <s>参考价&yen;{{item.referencePrice}}</s>
                                    <img class="add-car" src="/public/images/car-icon.png" @tap.stop="_addToCart(item.id)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <footer>
      <div class="base-manu" style="background-color:#ffffff" ;>
        <a class="manu index-link active">
          首页
        </a>
        <a class="manu cart-link" href="../../shoppingCart/index.html">
          购物车
          <b class="shop1" v-if="data.count" {{data.count}}></b>
        </a>
        <a class="manu user-link" href="../../we/index.html">
          我的
        </a>
      </div>
    </footer>
    </div>
</template>

<script>
  require('../../public/images/car-icon.png');
  import store from '../mall-store';
  export default {
    data: function () {
      return {
        data: store.state,
        keyword: ''
      };
    },
    methods: {
      goback: function () {
        window.history.go(-1);
      },
      loadmore: function () {
        store.getMyGoods(this.data.searchKey, this.data.goodsPager.pageSize, this.data.goodsPager.pageNo);
      },
      _addToCart: function (goodsId) {
        store.addToCart(goodsId);
      },
      setSearchKey: function (route) {
        this.data.searchKey = {};
        if (route.query.keyword) {
          this.data.searchKey.keyword = route.query.keyword;
        } else if (route.query.goodsType) {
          this.data.searchKey.goodsType = route.query.goodsType;
        } else if (route.query.catagoryId) {
          this.data.searchKey.catagoryId = route.query.catagoryId;
        }
      },
      search: function () {
        this.data.searchKey = {};
        this.data.searchKey.keyword = this.keyword;
        this.data.goodsPager.pageNo = 1;
        this.data.myGoodsList = [];
        store.getMyGoods(this.data.searchKey, this.data.goodsPager.pageSize, this.data.goodsPager.pageNo);
      },
      lookGoods: function (id) {
        store.lookGoodsDetail(id);
      }
    },
    watch: {
      '$route' (to, from) {
        this.keyword = '';
        this.setSearchKey(to);
        this.data.goodsPager.pageNo = 1;
        this.data.myGoodsList = [];
        store.getMyGoods(this.data.searchKey, this.data.goodsPager.pageSize, this.data.goodsPager.pageNo);
      }
    },
    created: function () {
      this.keyword = '';
      // 根据路由传递参数修改searchKey
      this.setSearchKey(this.$route);
      this.data.goodsPager.pageNo = 1;
      this.data.myGoodsList = [];
      store.getMyGoods(this.data.searchKey, this.data.goodsPager.pageSize, this.data.goodsPager.pageNo);
    },
    ready: function () {
      this.$nextTick(function () {
        mui.init({
          pullRefresh: {
            container: document.getElementById('refreshContainer'),
            up: {
              heigth: 150,
              auto: false,
              contentrefresh: '正在加载...',
              contentnomore: '没有更多数据了',
              callback: this.loadmore
            }
          }
        });
      });
    }
  };
</script>
